import './index.scss'
import type {MenuProps} from 'antd';
import {Menu} from "antd";
import {useNavigate} from 'react-router-dom'
import {Outlet} from 'react-router-dom'

type MenuItem = Required<MenuProps>['items'][number];
const items: MenuItem[] = [{
    key: 'order', label: '预约挂号',
}, {
    key: 'detail', label: '医院详情',
}, {
    key: 'notice', label: '预约须知',
}, {
    key: 'discontinuation', label: '停诊信息', disabled: true
}, {
    key: 'option', label: '查询/取消',
},

];

export default function MyMenu() {
    const navigate = useNavigate()
    const onClick: MenuProps['onClick'] = (e) => {
        console.log('click ', e.key);
        if (e.key !== 'discontinuation') {
            navigate('/hospital/' + e.key + '/1')
        }
    };
    return (<div style={{
        height: '100%', width: '100%'
    }} className={'flex'}>
        <div className={'menu-content flex'}>
            <Menu
                onClick={onClick}
                style={{width: 256}}
                defaultSelectedKeys={['order']}
                mode="inline"
                items={items}
            />

        </div>
        <div className={'menu-view'}>
            <Outlet></Outlet>
        </div>
    </div>)
}
